<template>
   <div>
       <Panel></Panel>
       <Panel>
          <template v-slot:title><h2>蜗牛学苑</h2></template>
          <template v-slot:name>
             <span :class="['style1']">翟吉喆</span>
          </template>
          <template v-slot:avatar>
              <img :class="['avatar']" src="https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/teacher/20220222/abc7a6e787be41d0b12aa41e429b71d2.png" alt="">
          </template>
          <template v-slot:desc>
              他好我也好
          </template>
       </Panel>

        <Panel>
          <template #title><h2>阿多比设计学院</h2></template>
          <template #name>
             <span :class="['style2']">李老师</span>
          </template>
          <template #desc>
              设计最好的东西给你
          </template>
       </Panel>

   </div>
    
</template>

<script>
import Panel from './components/Panel.vue'
export default {
  components: { Panel },

}
</script>

<style>
  .style1{
    color:brown;
    font-weight: bold;
  }
  .style2{
    color:springgreen;
    font-weight: bold;
    font-style: italic;
  }
  .avatar{
    width: 50px;
  }
</style>